<template>
  <div>
    <!-- pc 端显示效果-->
    <div class="topNav topNav-pc">
      <div style="height: 3px;background-color: cadetblue"></div>
      <div class="container">
        <!--logo部分-->
        <router-link to="/homePage">
          <div class="logo logo1">陌MO</div>
          <div class="logo logo2">JI迹</div>
        </router-link>
        <!--导航菜单部分-->
        <div class="menu">
          <router-link to="/homePage">
            <div class="menu-item" :class="menu==='/homePage'?'menu-item-selected':''">
              <span class="glyphicon glyphicon-home"></span> 首页
            </div>
          </router-link>
          <router-link to="/selfBlog">
            <div class="menu-item" :class="menu==='/selfBlog'?'menu-item-selected':''">
              <span class="glyphicon glyphicon-th-list"></span> 博客
            </div>
          </router-link>
          <router-link to="/selfLife">
            <div class="menu-item" :class="menu==='/selfLife'?'menu-item-selected':''">
              <span class="glyphicon glyphicon-fire"></span> 生活
            </div>
          </router-link>
        </div>
        <!--登陆注册部分-->
        <div v-if="!userinfo.islogin" class="userinfo">
          <router-link to="/loginPage">
            <div class="account" :class="menu==='/loginPage'?'account-selected':''">
              立即登陆
            </div>
          </router-link>
          <router-link to="/registerPage">
            <div class="account" :class="menu==='/registerPage'?'account-selected':''">
              免费注册
            </div>
          </router-link>
        </div>
        <!--登陆后用户信息-->
        <div v-else class="userinfo">
          <router-link to="/userPage">
            <div class="user" :class="menu==='/userPage'?'user-selected':''">
              <span class="glyphicon glyphicon-user"></span> {{ userinfo.username }}
            </div>
          </router-link>
          <a href="javascrit:void(0);" @click="logout">
            <div class="logout">
              <span class="glyphicon glyphicon-off"></span> 退出
            </div>
          </a>
        </div>
      </div>
    </div>
    <!-- mobile 端显示效果-->
    <div class="topNav topNav-mob">
      <div style="height: 2px;background-color: cadetblue"></div>
      <router-link to="/" class="search"></router-link>
      <div class="logo">home</div>
      <div class="user"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      menu: this.$route.path
    }
  },
  methods: {
    logout () {
      this.$http.post('/java_kunpeng/logout')
        .then((response) => {
          const json = response.data
          if (json.state === '0') {
            this.$store.dispatch('logout')
            this.$router.push('/homePage')
          } else {
            alert('退出失败！')
          }
        })
        .catch((error) => {
          alert('退出失败:' + error.toString())
        })
    }
  },
  computed: {
    ...mapGetters([
      'userinfo'
    ])
  },
  watch: {
    '$route': function (to) {
      this.menu = to.path
    }
  }
}
</script>

<style scoped>
  .topNav{
    width: 100%;
    border-bottom: 1px gainsboro solid;
    position: relative;
    box-shadow: 5px 0px 5px gainsboro;
  }
/*pc 端*/
  .topNav-pc{
    height: 65px;
    vertical-align: middle;
  }
  /*logo部分*/
  .logo{
    line-height: 62px;
    display: inline;
    font-size: 20px;
    font-weight: bolder;
    float: left;
  }
  .logo1{
    color: black;
    margin-left: 0px;
  }
  .logo2{
    color: cadetblue;
    margin-left: 0px;
  }
  /*菜单部分*/
  .menu{
    height: 62px;
    width: 330px;
    float: left;
    margin-left: 50px;
  }
  .menu-item{
    width: 110px;
    text-align: center;
    line-height: 57px;
    color: gray;
    float: left;
  }
  .menu-item:hover{
    background-color: ghostwhite;
    border-bottom: 5px cadetblue solid;
  }
  .menu-item-selected{
    color: cadetblue;
    font-weight: bolder;
    background-color: ghostwhite;
    border-bottom: 5px cadetblue solid;
  }

  .userinfo{
    height: 62px;
    float: right;
  }
  /*登陆注册部分*/
  .account {
    height: 35px;
    width: 80px;
    float: left;
    text-align: center;
    color: gray;
    font-size: 13px;
    line-height: 30px;
    border:1px gainsboro solid;
    border-radius: 5px;
    margin-top: 15px;
    margin-right: 15px;
  }
  .account:hover {
    color: white;
    background-color: cadetblue;
  }
  .account-selected {
    color: white;
    background-color: cadetblue;
    font-weight: bold;
  }
  /*用户名*/
  .user {
    color: gray;
    float: right;
    margin-top: 18px;
    margin-right: 0px;
  }
  .logout {
    color: #d80b32;
    float: right;
    font-weight: bold;
    margin-top: 18px;
    margin-right: 30px;
  }
  .user:hover {
    text-decoration:none;
  }
  .user-selected {
    font-size: 18px;
    color: black;
    font-weight: bold;
  }
/*手机端*/
  .topNav-mob {
    height: 45px;
    display: none;
  }
  @media screen and (max-width: 768px) {
    .topNav-pc{
      display: none;
    }
    .topNav-mob{
      height: 50px;
      display: block;
    }
  }
</style>
